import Head from 'next/head'
import GridBox from '../components/grid-box'

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>next-google</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <div className="logo_box">
          <img src="/images/logo.png" />
        </div>
        <div className="ipt_box">
          <input className="ipt" placeholder="输入搜索的内容，或输入网址" />
        </div>
        <GridBox />
      </main>

      

      <style jsx>{`
        .container {
          min-height: 100vh;
        }
        .logo_box {
          padding-top: 200px;
          text-align: center;
        }
        .logo_box img {
          width: 272px;
          height: 92px;
        }
        .ipt_box {
          padding: 20px 0;
          text-align: center;
        }
        .ipt_box .ipt {
          width: 552px;
          height: 44px;
          font-size: 16px;
          color: #333333;
          padding: 0 15px;
          border: 1px solid #dfe1e5;
          outline: none;
          border-radius: 24px;
          background-color: #ffffff;
        }
        .ipt_box .ipt:focus {
          box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
        }
      `}</style>

      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }

        * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
      `}</style>
    </div>
  )
}

